<template>
	<view>
		<ItemList head>
			<template #title>
				<text class="form-name">{{title}}</text>
			</template>
			<template #topic>
				<p>{{subtitle}}</p>
			</template>
		</ItemList>
		<template>
			<ItemList v-for="item in formItemList">
				<template #title>
					{{item.title}}
				</template>
				<template #topic>
					<template v-if="item.type == 'input'">
						<u--input v-model="form[item.field]"
							:value="`${userDetail.real_name} ${userDetail.school?userDetail.school:''} ${userDetail.year?userDetail.year:''}`"
							border="bottom"></u--input>
					</template>
					<template v-if="item.type == 'combox'">
						<uni-combox style="border-bottom: solid 1px #DCDFE6;" :candidates="item.options" :border="false"
							placeholder="select" v-model="form[item.field]"></uni-combox>
					</template>
					<template v-if="item.type == 'select'">
						<uni-data-select v-model="form[item.field]" value="user_id" text="real_name" :localdata="item.options"></uni-data-select>
					</template>
				</template>
			</ItemList>
		</template>
	</view>
</template>

<script>
	import formApi from '@/api/forms.js'
	import ItemList from '@/components/basicListItem/formCardItem/formCardItem.vue'
	export default {
		components: {
			ItemList
		},
		computed: {
			userDetail() {
				return this.$store.state.userDetail;
			},
			userList() {
				const arr = this.$store.state.userList
				return arr.map(item => item.real_name);
			}
		},
		data() {
			return {
				index: 0,
				userListindex: 0,
				emailOption: this.$store.state.userDetail.emails,
				userOption: [],
				form: {
					
				},
				//form解释
				subtitle: '',
				// form标题
				title: '',
				formItemList: [],
			}
		},
		onLoad() {
			this.getOption()
		},

		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.form.email = this.emailOption[e.detail.value]
			},
			userListChange(e) {
				this.userListindex = e.detail.value
				this.form.mot_id = this.userList[e.detail.value]
			},
			getOption() {
				formApi.getFormInfo({
					formType: "staffing"
				}).then(res => {
					console.log(res);
					this.formItemList = res.data.data.info.item
					//form解释
					this.subtitle = res.data.data.info.subtitle
					// form标题
					this.title = res.data.data.info.title
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f3eafb;
	}

	.form-name {
		font-size: 70rpx;
		font-weight: 600;
	}

	.btn {
		width: 150rpx;
		float: left;
	}

	.picker-btn {
		border-bottom: 1px solid #000;
		padding: 9px;
	}
</style>